<template>
    <div>
        <div>
            <mt-header title="修改密码" style="background: linear-gradient(#000000, #035838);">
                <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
            </mt-header>
        </div>
        <div>
            <mt-field label="新密码" placeholder="请输入新密码" v-model="newpassword"></mt-field>
        </div>
        <div>
            <mt-field label="确认密码" placeholder="确认密码" v-model="newpasswordnext"></mt-field>
        </div>
        <div class="promoters-button">
            <button class="mint-button mint-button--default mint-button--large is-plain" @click="updatePassword()">
                <label class="mint-button-text">保存</label>
            </button>
        </div>

    </div>

</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newpassword: "",
      newpasswordnext: ""
    };
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    updatePassword() {
      let regex = new RegExp("(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}");
      let newpassword = this.newpassword;
      let nextpassword = this.newpasswordnext;
      console.log(newpassword + "..." + nextpassword);
      if (newpassword === "" || newpassword === null) {
        Indicator.close();
        let instance = Toast({
          message: "请输入新密码"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
        return;
      } else {
        if (newpassword && regex.test(newpassword)) {
          if (nextpassword === "" || nextpassword === null) {
            Indicator.close();
            let instance = Toast({
              message: "请再次输入密码"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
            return;
          }
          if (newpassword != nextpassword) {
            Indicator.close();
            let instance = Toast({
              message: "请输入相同密码"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
            return;
          }
          //发送ajax到后台
          let global_members_id = JSON.parse(
            localStorage.getItem("global_members_id")
          );
          axios({
            method: "post",
            url: "/api/modify/account.htm",
            params: {
              id: global_members_id,
              newpassword: newpassword
            }
          }).then(res => {
            res = res.data;
            if (res.zt === "true") {
              this.$store.dispatch("showTabbar", { boolean: "0" });
              this.$router.push({ path: "/me" });
              Indicator.close();
              let instance = Toast({
                message: "更新成功"
              });
              setTimeout(() => {
                instance.close();
              }, 2000);
            } else {
              Indicator.close();
              let instance = Toast({
                message: "更新失败"
              });
              setTimeout(() => {
                instance.close();
              }, 2000);
            }
          });
        } else {
          Indicator.close();
          let instance = Toast({
            message: "密码为至少是8位的英文、数字、特殊字符混合组合"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
          return;
        }
      }
    }
  }
};
</script>
<style scoped>
.promoters-button {
  height: 150px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
</style>